<template id="info">
    <div class="info">
        <div v-if="flag">
        <el-row>
            <el-col :span="4">姓名</el-col>
            <el-col :span="4"><el-tag>{{username}}</el-tag></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">手机</el-col>
            <el-col :span="4"><el-tag>{{userphone}}</el-tag></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">邮箱</el-col>
            <el-col :span="4"><el-tag>{{useremail}}</el-tag></el-col>
        </el-row>
        </div>
        <div v-else>
            <el-row>
            <el-col :span="4">姓名</el-col>
            <el-col :span="4"><el-input v-model="username" name="username"></el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">手机</el-col>
            <el-col :span="4"><el-input v-model="userphone" name="userphone"></el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">邮箱</el-col>
            <el-col :span="4"><el-input v-model="useremail" name="useremail"></el-input></el-col>
        </el-row>
        </div>
        <el-button type="primary" @click="changeinfo" v-if="flag">修改</el-button>
        <el-button type="primary" @click="saveinfo" v-else>保存</el-button>
    </div>
</template>
<script>
import store from '@/store/index'
import Router from '@/router/index'
export default {
    data(){
        return{
            username:store.state.username,
            userphone:store.state.userphone,
            useremail:store.state.useremail,
            flag:true
        }
    },
    methods:{
        changeinfo(){
            if(store.state.username==""){
                Router.push('/login');
            }else{
                this.flag=!this.flag;
                console.log("change");
            }
        },
        saveinfo(){
           if(this.username==""){
               this.username = store.state.username;
           }else if(this.userphone==""){
               this.userphone=store.state.userphone;
           }else if(this.useremail==""){
               this.useremail=store.state.useremail;
           }else if(this.userphone.length<11 || this.userphone.length>11){
                alert("手机号格式不正确");
           }else{
               var userinfo = {
                   'username':this.username,
                   'userphone':this.userphone,
                   'useremail':this.useremail
               };
               this.axios.post("/api/shopping/changeinfo.php",userinfo).then((res)=>{
                    if(res.data=="ok"){
                        // alert("保存成功");
                        this.flag = !this.flag;
                        console.log(res.data);
                    }else if(res.data=="error"){
                        // alert("保存失败,请重新修改");
                        console.log(res.data);
                    }else{
                        console.log(res.data);
                    }
               });
               
           }
        }
    }
}
</script>
<style>
    .info{
        margin-left: 500px;
        display: inline;
    }
    .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
      margin-bottom: 0;
    }
  .el-col {
    border-radius: 4px;
  }
</style>